<template>
    <div class="content">
        <div class="search">
            <el-input v-model="input" placeholder="案件编号"></el-input>
            <el-select v-model="value" placeholder="是否立案">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary">搜索</el-button>
        </div>
        <div class="btns">
            <el-button-group>
                <el-button type="primary" size="small" @click="openFP">分配</el-button>
                <el-button type="primary" size="small" @click="add">新增</el-button>
                <el-button type="primary" size="small" @click="edit">修改</el-button>
            </el-button-group>
        </div>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                label="案件编号">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                prop="laiyuan"
                label="案件来源">
            </el-table-column>
            <el-table-column
                prop="leibie"
                label="案件类别"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="zhuti"
                label="执法主体"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="leixing"
                label="当事人类型"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="dangshiren"
                label="当事人"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="lianxifangshi"
                label="联系方式"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="shifoulian"
                label="是否立案"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="time"
                label="录入时间"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="edit" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: center; padding: 10px 0;">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="1000">
            </el-pagination>
        </div>

        <el-dialog title="分配人员" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="form">
                <el-select v-model="person" placeholder="请选择分配人员" style="width: 100%">
                    <el-option label="张三" value="shanghai"></el-option>
                    <el-option label="李四" value="beijing"></el-option>
                    <el-option label="王五" value="wangwu"></el-option>
                </el-select>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'Law',
    data () {
        return {
            dialogFormVisible: false,
            person: '',
            tableData: [{
                id: '20190606',
                laiyuan: '其他',
                leibie: '简易案件',
                zhuti: '司法局',
                leixing: '个人工商户',
                dangshiren: '刘萌',
                lianxifangshi: '13615023657',
                shifoulian: '是',
                time: '2019/9/30  10:37:27 AM'
            }, {
                id: '20190532',
                laiyuan: '群众举报',
                leibie: '简易案件',
                zhuti: '司法局',
                leixing: '个人工商户',
                dangshiren: '马艳',
                lianxifangshi: '15235569856',
                shifoulian: '是',
                time: '2019/9/29  10:21:40 AM'
            }, {
                id: '20190532',
                laiyuan: '案件移交',
                leibie: '简易案件',
                zhuti: '忻州市司法局',
                leixing: '个人工商户',
                dangshiren: '马艳',
                lianxifangshi: '15235632252',
                shifoulian: '是',
                time: '2019/9/28  10:58:02 AM'
            }, {
                id: '20190535',
                laiyuan: '上级交办',
                leibie: '一般案件',
                zhuti: '忻州市司法局',
                leixing: '个人工商户',
                dangshiren: '黄伟',
                lianxifangshi: '15235563892',
                shifoulian: '是',
                time: '2019/9/27  11:05:20 AM'
            }, {
                id: '20190535',
                laiyuan: '其他',
                leibie: '一般案件',
                zhuti: '忻州市司法局',
                leixing: '个人工商户',
                dangshiren: '黄伟',
                lianxifangshi: '15235563892',
                shifoulian: '是',
                time: '2019/9/27  11:05:20 AM'
            }],
            multipleSelection: [],
            options: [{
                value: '1',
                label: '是'
            }, {
                value: '0',
                label: '否'
            }],
            value: '',
            formLabelWidth: '120px'
        }
    },
    methods: {
        openFP: function () {
            this.dialogFormVisible = true
        },
        add: function () {
            this.$router.push('/lawAdd')
        },
        edit: function () {
            this.add()
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    margin: 15px 15px 80px 15px; background: #FFFFFF; border-radius: 5px; box-shadow: 0 10px 20px rgba(0,0,0,0.06); padding: 20px 30px;
}
.search {
    display: flex; justify-content: flex-start;
    .el-input {
        width: auto; margin-right: 20px;
    }
    .el-select {
        margin-right: 20px;
    }
}
.btns {
    margin: 15px 0;
}
</style>
